<template>
  <div>
    测试首页（vuex模块组的使用）
    <p>获取姓名和年龄、体重</p>
    <div>姓名:{{$store.state.name}}</div>
    <div>年龄:{{$store.state.user.getSize}}</div>
    <div>体重:{{$store.state.login.size}}</div>
    <button @click="setName">更改姓名</button>
    <button @click="setAge">更改年龄</button>
    <button @click="setHand">更改体重</button><br>

    <button @click="setTimeName">异步更改姓名</button>
    <button @click="setTimeHead">异步更改体重</button>
  </div>
</template>
<script>
  export default{
    mounted(){
      /*
        打印查看
        1. 如果模块开启了命名空间，打印出来的结果有 _mutations中，可以看到命名空间的 mutations方法(有路径的是命名空间的，没路径的是全局的)
      */ 
      console.log(this.$store);
    },
    methods: {
      // mutations用法说明
      setName(){
        // 这个是全局的(也就是在模块组的外面的 vuex)
        this.$store.commit('setName', '鲁班');
      },
      setAge(){
        //  调用模块组的 mutations
        console.log(this.$store, 'this.$store');
        this.$store.commit('setSize', 29); 
        /*
          错误的使用方法，该setSize 和下面的同名。不同名还好，同名会影响，
          正确做法如下（user 文件 开启命名控件namespaced:true， 并且如下写法）
        */ 
        // this.$store.commit(' user/setSize', 29); 
      },
      setHand(){
        /*
          模块化使用了命名空间，使用方法就是    路径文件名/mutations方法名
          namespaced:true,
        */ 
        this.$store.commit('login/setSize', 88);
      },

      // action
      setTimeName(){
        // 全局的
        this.$store.dispatch('setTimeName', '我不叫鲁班');
      },
      setTimeHead(){
        this.$store.dispatch('login/setTimeHead', '我的体重188')
      }
    }
  }
</script>
